<template>
  <el-row class="book-category-row">
    <el-col :span="3">
      <div class="book-category-title">图书分类</div>
    </el-col>
    <el-col :span="21">
      <div class="book-category-tags">
        <el-button plain v-for="(category) in bookCategories" :key="category.categoryId" class="category-button"
          @click="handleCategoryClick(category)">
          {{ category.categoryName }}
        </el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import { onMounted, ref } from 'vue'
// import { getBookCategories } from '@/api/book'
import { useBookStore } from '@/stores/book'
const bookCategories = ref([])
const userStore = useBookStore()

onMounted(async () => {
  await userStore.addBookCategeory()
  bookCategories.value = userStore.BookCategory
})

const handleCategoryClick = (category) => {
  // console.log(category.categoryName);
  router.push({
    path: '/bookSearch',
    query: {
      searchText: category.categoryName
    }
  })
}
</script>

<style scoped>
.el-button {
  margin: 5px 4px;
}

.book-category-row {
  background-color: #ffffff;
  padding: 20px 50px;
  margin: 10px 100px 40px 100px;
  border-radius: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.book-category-title {
  font-size: 24px;
  font-weight: bold;
  height: 100%;
  text-align: center;
  color: #6a6a6a;
  border-right: 1.5px solid rgb(165, 165, 165);
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #ffffff;
}
</style>